<!-- app 沉浸式状态栏适配 -->
<template>
  <div>
    <van-sticky >
      <div class="mHead-h" :style="{ height: statusBarHeight + 'px'}"></div>
      <div class="mHead" :style="{ paddingTop: statusBarHeight + 'px' }"></div>
    </van-sticky>
    <!-- <div
      id="mHead"
      ref="mHead"
      class="mHead"
      :style="{
        paddingTop: statusBarHeight
      }"
    >
    </div> -->
  </div>
</template>

<script>
export default {
  name: "mHead",
  data() {
    return {
      statusBarHeight: '25'
    };
  },
  created() {
    window.WindVane.call('SBase','getDeviceInfo',{},(res)=>{
      console.log('getDeviceInfo ===============',res)
      let data = res.data;//包含数据的对象
      this.statusBarHeight = (data.statusHeight/window.devicePixelRatio).toFixed(2);
    },(e)=>{
      console.log('getDeviceInfo 失败===============')
    });
  },
  activated() {
    console.log('getDeviceInfo activated===============')
  },
};
</script>

<style scoped lang="scss">
.mHead-h{
  width: 100%;
  background: #000;
}
/*安卓手机通用的状态栏高度*/
.mHead {
  top: 0;
  width: 100%;
  left: 0;
  position: fixed;
  z-index: 5;
  background: #000;
}
/*ios手机可以设置为安全区域的高度*/
// .ignore-padding-top-ios {
//   padding-top: constant(safe-area-inset-top);
//   padding-top: env(safe-area-inset-top);
// }
// .ignore-padding-top-other {
//   padding-top: @normalStatusBar;
// }
// .padding-top-none {
//   padding-top: 0;
// }
</style>